<template>
  <div class="help-center-container">
    <div class="faq-list">
      <div class="faq-item" v-for="(faq, index) in faqs" :key="index">
        <h2 class="faq-question">{{ faq.question }}</h2>
        <p class="faq-answer">{{ faq.answer }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      faqs: [
        {
          question: "如何登录账号？",
          answer: "您可以在登录页面输入您的账号和密码，然后点击登录按钮即可完成登录。如果您忘记了密码，可以点击忘记密码进行重置。"
        },
        {
          question: "如何修改个人信息？",
          answer: "登录账号后，点击个人中心，再点击个人资料，即可对您的用户名、邮箱、电话等信息进行修改。"
        },
        {
          question: "如何查找商品？",
          answer: "您可以在首页的搜索框中输入您想要查找的商品名称，然后点击搜索按钮，系统会为您展示相关的商品信息。"
        }
      ]
    };
  }
};
</script>

<style scoped>
.help-center-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.help-center-title {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.faq-list {
  margin-bottom: 20px;
}

.faq-item {
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 15px;
  background-color: #f9f9f9;
}

.faq-question {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
  border-bottom: 2px solid #007bff;
  padding-bottom: 5px;
}

.faq-answer {
  font-size: 16px;
  color: #666;
}
</style>